<template>
	<div class="ToLogin">
		<div class="head_two">
			<i class="iconfont icon-mine_left" @click="$router.back(-1)"></i>
		</div>
		<div class="login_cont">
			<p class="title">帐号登陆</p>
			<ul class="logUl">
				<li><input type="" name="" placeholder="手机号、邮箱" v-model="myphone"></li>
				<li><input type="" name="" placeholder="输入登录密码" v-model="mypawds"></li>
			</ul>
			<button class="button " :class="{backg:isShow}" @click="OnceLogin()">登录</button>
			{{filterPhone}}
			<p class="othe_a">
				<a href="/LoginAll/ToPhone/2">快速注册</a>
				<a href="/LoginAll/ToPhone/3">忘记登录密码</a>
			</p>

			<div class="othe_login">
				<p class="hengxian"><i></i><span>快速登录</span></p>
				<li>
					<a href="/LoginAll/ToPhone/4">
						<i><img alt="加载失败" src="../../assets/LoginAll/login_phone.png"></i>
						<span>短信登录</span>
					</a> 
				</li>
				<li>
					<i><img alt="加载失败" src="../../assets/LoginAll/login_WeChat.png"></i>
					<span>微信登录</span>
				</li>
			</div>
		</div>
	</div>
</template>
<script type="text/javascript">
import { Toast } from 'mint-ui';
import Qs from 'qs';
import md5 from 'js-md5';
	export default{
		name:'ToLogin',
		data(){
			return{
				myphone:'',
				mypawds:'',
				isShow:false
			}
		},
		created:function(){
			 this.urls=this.$store.state.urls;
		},
		computed:{
			filterPhone:function() {
				if (this.myphone.length>10) {
					this.isShow=true
				}else{
					this.isShow=false
				}
			}
		},
		mounted:function(){
			this.Estimate();
		},
		methods:{
			//点击登录
			OnceLogin:function(){
				console.log(this.urls);
				if (this.isShow==true) {
					if (/^1\d{10}$/.test(this.myphone)) {
							 this.$http.post(this.urls+"/WorkMembers/v1.0/AccountLogin",Qs.stringify(
							 		{
									  "Account":this.myphone,
									  "Pwd":md5(this.mypawds) 
									}
							 	)).then((res)=>{ 
					    			/*Toast(res.data.Return_Mess);*/ 
					    			console.log(res.data);
					    			localStorage.setItem("MembersID","value");
						 			localStorage.setItem("Type","value");
						 			localStorage.MembersID = res.data.Return_Data;
						 			localStorage.Type = 1;
						 			console.log(localStorage.getItem("MembersID"));
						 			console.log(localStorage.getItem("Type"));
						 			//如果是注册登录了，跳转第一页
						 			this.$store.state.MembersID=localStorage.getItem("MembersID")
						 			this.$store.state.showType=1
						 			this.$router.push({path:'/PlateAll/BourseAll'});
							  }).catch((err)=>{
							    console.log(err);
							  });

						}else{ 
							Toast("请输入正确手机号~")
						}
				}else{
					Toast("不能为空哟~")
				}
			},
			//进来判断是否有locahost
			Estimate:function(){
				if(!localStorage.getItem("MembersID")||!localStorage.getItem("Type")||localStorage.getItem("MembersID")=='undefined'||localStorage.getItem("Type")=='undefined') {
					 //进来判断是否已经有账号
				}else{
					//如果有进入下一个页面
					this.$router.push({path:'/PlateAll/BourseAll'}) 
				}
			}
		}
	}
</script>
<style scoped> 
	.logUl{
		width: 100%;
	}
	.logUl li{
		border-bottom: 1px solid #e8e8e8;
		height: 1.28rem;
	}
	.logUl li input{
		width: 100%;
		height: 100%;
	 	border:0;
		outline: none;
		text-indent: 0.3333333333rem;
		font-size: 0.4rem;
	}
	.button{
		width: 100%;
		outline: none;
		height:1.0666666667rem;
		color: #fff;
		font-size: 0.4533333333rem;
		background-color: #ccc;
		border:0;
		border-radius: 0.0666666667rem;
		margin:0.6666666667rem 0;
	}
	 .backg{
		background-color: #db2023;
	}

	.othe_login{
		width: 100%;
	}
	.othe_login .hengxian{
		width: 100%;
		position: relative;
		font-size: 0.32rem;
		color: #c6c6c6;
		text-align: center;
		margin-bottom: 0.6rem;
	}
	.othe_a{
		font-size: 0.3466666667rem; 
		margin-bottom:5.0666666667rem;
		color:#4f60ff !important; 
	}
	.othe_a a{
		text-decoration:underline;
	}
	.othe_a a:nth-child(2){
		float: right;
	}
	.othe_login{
		text-align: center;
	}
	.othe_login p i{
		display:block;
		width: 100%;
		border-bottom: 1px solid #ccc;
	}
	.othe_login p span{
		padding:0 0.2666666667rem;
		background-color: #fff;
		z-index: 10;
		position: absolute;
		left:40%;
		top: -0.2rem;
	}
	.othe_login li{
		display: inline-block;
		 margin:0.5733333333rem;
	}
	.othe_login li a{
		display: inline-block;
	}
	.othe_login li i{
		display: block;
		width: 1.2rem;
		height: 1.2rem;
	}
	.othe_login li i img{
		width: 100%;
	}
	.othe_login li span{
		display: block;
		color: #bbbbbb;
		font-size: 0.2933333333rem;
		line-height:0.6rem;
	}
	a{
		color:#4f60ff !important; 
	}
</style>